<template>
  <div>
    <Form
      :schema="schema"
      :model="actor"
      @register="formRegister"
      :isCol="false"
      label-width="240px"
      :rules="actorRules"
    />
    <div v-if="readonly == false" style="text-align: center; margin-top: 10px; width: 100%">
      <el-space>
        <BaseButton type="primary" @click="saveInto">保存</BaseButton>
        <BaseButton @click="initIntoOut">重置</BaseButton>
      </el-space>
    </div>
  </div>
</template>

<script>
import { WhileSpecifyMode } from '@/flow/config/flowConfig'
import { HrItemDic } from '@/config/publicDic'
import * as nodeAuditEmpApi from '@/flow/api/flowNodeAuditEmp'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useForm } from '@/hooks/web/useForm'
import { Form } from '@/components/Form'
const { formRegister, formMethods } = useForm()
export default {
  components: { Form },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    },
    show: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      actorRules: {
        Mode: [
          {
            required: true,
            message: '限定范围不能为空！',
            trigger: 'blur'
          }
        ],
        UnitId: [
          {
            required: true,
            message: '限定单位不能为空！',
            trigger: 'blur'
          }
        ],
        DeptId: [
          {
            required: true,
            message: '限定单位不能为空！',
            trigger: 'blur'
          }
        ],
        EmpId: [
          {
            required: true,
            message: '指定人员不能为空！',
            trigger: 'blur'
          }
        ],
        CompanyId: [
          {
            required: true,
            message: '限定公司不能为空！',
            trigger: 'blur'
          }
        ],
        TitleCode: [
          {
            required: true,
            message: '职务不能为空！',
            trigger: 'blur'
          }
        ],
        PostCode: [
          {
            required: true,
            message: '岗位不能为空！',
            trigger: 'blur'
          }
        ],
        ToNodeId: [
          {
            required: true,
            message: '指定节点不能为空！',
            trigger: 'blur'
          }
        ]
      },
      actor: {
        TitleOrPost: 0,
        Mode: 0,
        TitleCode: null,
        PostCode: null,
        Show: null
      }
    }
  },
  computed: {
    comId() {
      return useUserStoreWithOut().comId
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.intAuditEmp()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    formRegister,
    initScheme() {
      const list = [
        {
          field: 'Mode',
          label: '限定范围',
          component: 'RadioGroup',
          componentProps: {
            disabled: this.readonly,
            options: WhileSpecifyMode,
            props: {
              label: 'text',
              value: 'value'
            },
            on: {
              change: (val) => {
                this.actor.Mode = val
                this.modeChange()
                this.initScheme()
              }
            }
          }
        },
        {
          field: 'TitleOrPost',
          label: '职务或岗位',
          component: 'RadioGroup',
          componentProps: {
            disabled: this.readonly,
            options:
              this.actor.Mode != 2
                ? [
                    {
                      label: '职务',
                      value: 0
                    },
                    {
                      label: '岗位',
                      value: 1
                    },
                    {
                      label: '负责人',
                      value: 2
                    }
                  ]
                : [
                    {
                      label: '负责人',
                      value: 2
                    }
                  ],
            on: {
              change: (val) => {
                this.actor.TitleOrPost = val
                this.initScheme()
              }
            }
          }
        }
      ]
      if (this.actor.TitleOrPost === 0) {
        list.push({
          field: 'TitleCode',
          label: '限定职务',
          component: 'DicItem',
          componentProps: {
            disabled: this.readonly,
            dicId: HrItemDic.title,
            labelField: 'TitleName',
            multiple: true,
            placeholder: '选择职务'
          }
        })
      } else if (this.actor.TitleOrPost === 0) {
        list.push({
          field: 'PostCode',
          label: '限定岗位',
          component: 'TreeDicItem',
          componentProps: {
            readonly: this.readonly,
            dicId: HrItemDic.post,
            labelField: 'PostName',
            multiple: true,
            placeholder: '选择岗位'
          }
        })
      }
      this.schema = list
    },
    modeChange() {
      this.actor.TitleOrPost = this.actor.Mode !== 2 ? 0 : 2
      this.actor.TitleCode = null
      this.actor.PostCode = null
    },
    async saveActor() {
      const data = await formMethods.validate()
      if (data == null) {
        return
      }
      this.setActor(data)
    },
    formatActor(val) {
      const data = {
        FlowId: this.flowId,
        NodeId: this.nodeId
      }
      const mode = val.Mode
      data.CompanyId = this.comId
      data.TitleCode = val.TitleCode
      data.PostCode = val.PostCode
      if (mode === 0 && val.TitleOrPost === 0) {
        data.Mode = 20
        data.Show = '逐级部门，职务:' + val.TitleName
      } else if (mode === 0 && val.TitleOrPost === 1) {
        data.Mode = 12
        data.Show = '逐级部门，岗位:' + val.PostName
      } else if (mode === 0 && val.TitleOrPost === 2) {
        data.Mode = 68
        data.Show = '逐级部门，负责人'
      } else if (mode === 1 && val.TitleOrPost === 0) {
        data.Mode = 48
        data.Show = '逐级单位，职务:' + val.TitleName
      } else if (mode === 1 && val.TitleOrPost === 1) {
        data.Mode = 40
        data.Show = '逐级单位，岗位:' + val.PostName
      } else if (mode === 1 && val.TitleOrPost === 2) {
        data.Mode = 96
        data.Show = '逐级单位，负责人'
      } else if (mode === 2 && val.TitleOrPost === 0) {
        data.Mode = 52
        data.Show = '逐级单位和部门，职务:' + val.TitleName
      } else if (mode === 2 && val.TitleOrPost === 1) {
        data.Mode = 44
        data.Show = '逐级单位和部门，岗位:' + val.PostName
      } else if (mode === 2 && val.TitleOrPost === 2) {
        data.Mode = 100
        data.Show = '逐级单位和部门，负责人'
      }
      return data
    },
    async setActor(val) {
      const data = this.formatActor(val)
      await nodeAuditEmpApi.Set(data)
      this.$message({
        type: 'success',
        message: '保存成功!'
      })
      this.$emit('update:show', data.Show)
      this.$emit('change', data)
    },
    async intAuditEmp() {
      const res = await nodeAuditEmpApi.Get(this.nodeId)
      if (res == null) {
        this.actor.Mode = 0
        this.modeChange()
      } else {
        this.actor.CompanyId = this.comId
        this.actor.TitleCode = res.TitleCode
        this.actor.PostCode = res.PostCode
        if ((36 & res.Mode) === 36) {
          this.actor.Mode = 2
        } else if ((4 & res.Mode) === 4) {
          this.actor.Mode = 0
        } else {
          this.actor.Mode = 1
        }
        if ((64 & res.Mode) === 64) {
          this.actor.TitleOrPost = 2
        } else if ((16 & res.Mode) === 16) {
          this.actor.TitleOrPost = 0
        } else if ((8 & res.Mode) === 8) {
          this.actor.TitleOrPost = 1
        }
      }
      this.initScheme()
    }
  }
}
</script>
<style scoped>
.el-checkbox-group {
  line-height: 40px;
}
.specifyMode .el-radio {
  line-height: 20px;
}
</style>
